<template>
    <div>
        <!--1.轮播-->
        <div>
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                    <img class="img1" :src="image"/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--2.快捷导航-->
        <div>
            <van-grid square :border="false" :column-num="5">
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img0.baidu.com/it/u=793274863,3387658089&fm=253&fmt=auto&app=138&f=JPEG?w=545&h=500"
                               text="新鲜上市"/>
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img1.baidu.com/it/u=4024863966,1921116272&fm=253&fmt=auto&app=120&f=JPEG?w=350&h=350"
                               text="牛奶乳品"/>
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img0.baidu.com/it/u=587446872,170848677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                               text="粮油副食"/>
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img0.baidu.com/it/u=3708852376,3518103502&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                               text="冷藏生鲜"/>
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img2.baidu.com/it/u=3098978267,14911146&fm=253&fmt=auto&app=138&f=JPEG?w=588&h=500"
                               text="新品推荐"/>
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img1.baidu.com/it/u=1989367938,379009996&fm=253&fmt=auto&app=138&f=JPEG?w=250&h=250"
                               text="休闲零食"/>
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img1.baidu.com/it/u=3653685364,567194627&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
                               text="蔬菜豆品"/>
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img0.baidu.com/it/u=1070452035,3341113136&fm=253&fmt=auto&app=138&f=JPEG?w=434&h=500"
                               text="速冻冰品"/>
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img2.baidu.com/it/u=3592288934,4164162046&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                               text="家居日用"/>
                <van-grid-item v-for="value in 1" :key="value"
                               icon="https://img2.baidu.com/it/u=3035047381,3814779170&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                               text="猜你喜欢"/>
            </van-grid>
        </div>
        <!--3.快捷工具-->
        <div>
            <van-row gutter="10" justify="center">
                <van-col span="10" class="dv2" style="margin-left: 0.3rem">
                    <van-row>
                        <van-col span="24" class="dv1">
                            <div>
                                <p class="dv3">9.9元专场</p>
                                <p class="dv2">全场9.9元等你来抢</p>
                                <div>
                                    <img style="width: 50%"
                                         src="https://img1.baidu.com/it/u=478864059,746023033&fm=253&fmt=auto&app=138&f=JPEG?w=544&h=500">
                                </div>
                            </div>
                        </van-col>
                    </van-row>

                </van-col>
                <van-col offset="-5" span="11" class="dv2">
                    <van-row class="dv5">
                        <van-col span="16">
                            <div>
                                <p class="p2">批发商品</p>
                                <p class="p1">单商品5件起批</p>
                            </div>
                        </van-col>
                        <van-col span="7">
                            <img style="width: 100%;margin-top: 1.5rem"
                                 src="https://img1.baidu.com/it/u=3813004339,4064910189&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"/>
                        </van-col>
                    </van-row>

                    <van-row class="dv5" style="margin-top: 1rem">
                        <van-col span="16">
                            <div>
                                <p class="p3">新人专享</p>
                                <p class="p1">新会员专享优惠券</p>
                            </div>
                        </van-col>
                        <van-col span="6">
                            <img style="width: 100%;margin-top: 1rem"
                                 src="https://img1.baidu.com/it/u=3842180049,3834113512&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </div>
        <!--4.秒杀商品-->
        <div>
            <van-divider
                    :style="{ color: 'red', borderColor: 'red',fontSize:'1.3rem', padding: '0 16px' }"
            >
                秒杀商品
            </van-divider>
            <van-row gutter="10">
                <van-col span="12" v-for="g in skillgoods">
                    <van-card
                            :num="g.num"
                            :tag="g.tag"
                            :price="g.price"
                            :desc="g.desc"
                            :title="g.title"
                            :thumb="g.img"
                            :origin-price="g.oldprice"
                    />
                </van-col>
            </van-row>
        </div>
        <!--  5.优质精选-->
        <div>
            <van-divider
                    :style="{ color: 'red', borderColor: 'red',fontSize:'1.3rem', padding: '0 16px' }"
            >
                优质精选
            </van-divider>
            <van-row gutter="10">
                <van-col span="12" v-for="g in skillgoods">
                    <van-card
                            :num="g.num"
                            :tag="g.tag"
                            :price="g.price"
                            :desc="g.desc"
                            :title="g.title"
                            :thumb="g.img"
                            :origin-price="g.oldprice"
                    />
                </van-col>
            </van-row>
        </div>
    </div>
</template>


<script>
    export default {
        name: "Home",
        data() {
            return {
                images: [
                    'https://img1.baidu.com/it/u=4000125139,1596609490&fm=253&fmt=auto&app=138&f=JPEG?w=920&h=310',
                    'https://img1.baidu.com/it/u=921064956,2216796557&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=208',
                    'https://img1.baidu.com/it/u=2074316160,2195022953&fm=253&fmt=auto&app=138&f=PNG?w=658&h=211',
                    'https://img2.baidu.com/it/u=942140120,3161797267&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=300',
                ],
                seamsg:"",
                skillgoods:[
                    {
                        id:1,
                        num:2,
                        tag:"热卖",
                        price:22.2,
                        desc:"这是个商品",
                        title:"商品标题",
                        img:"https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg",
                        oldprice:66.6
                    },{
                        id:2,
                        num:288,
                        tag:"降价",
                        price:66.2,
                        desc:"这是个商品",
                        title:"商品标题",
                        img:"https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg",
                        oldprice:66.6
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .img1 {
        width: 100%;
        height: 10rem;
    }

    .dv1 {
        border: 2px solid chocolate;
        border-radius: 5px;
        background-color: peachpuff;
    }

    .dv2 {
        font-size: 0.7rem;
    }

    .dv3 {
        color: chocolate;
        font-size: 1rem;
    }

    .dv5 {
        border: 2px solid pink;
        border-radius: 5px;
    }

    .p2 {
        font-size: 1rem;
        color: deeppink;
    }

    .p3 {
        font-size: 1rem;
        color: blue;
    }

</style>